<template>
  <div class="bigbox">
    <div class="searchbox">
      <span class="left"><van-icon name="arrow-left" @click="back" /></span>
      <input type="text" placeholder="请输入商品名称" />
      <img src="../assets/imgs/home/搜索.png" alt="" class="search" />
    </div>

    <ShopItem :shop="shop" v-show="shop.imgUrl"></ShopItem>
    <Content></Content>
    <shoppingBar></shoppingBar>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import request from "@/utils/request";
import ShopItem from "@/components/ShopItem.vue";
import Content from "@/components/Content.vue";
import shoppingBar from '@/components/shoppingBar.vue'
let route = useRoute();
const data = reactive({ shop: {} });
// 通过传递店铺Id获得相应的店铺详情
async function getItemData() {
  const result = await request.get(`/api/v1/shop/${route.params.id}`);
  if (result.msg == "ok") {
    data.shop = result.data;
  }
}
const { shop } = toRefs(data);
getItemData();
function back() {
  router.push("/home");
}
</script>

<style lang="scss" scoped>
.bigbox {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .searchbox {
    max-width: 1024px;
    padding: 0px 20px 0 20px;
    display: flex;
    .left {
      font-size: 25px;
      margin-top: 5px;
      margin-left: -10px;
      margin-right: 10px;
      color: #9b9b9b;
    }
    input {
      width: 100%;
      height: 30px;
      background-color: #f5f5f5;
      border: none;
      margin-top: 10px;
      border-radius: 5px;
      position: relative;
      padding-left: 35px;
    }
    .search {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 50px;
      top: 25px;
    }
  }
}
</style>
